<div [@flyIn]="'active'">
  <div class="wrapper-sm">
    <div class="panel panel-default m-b-n-xs" style="border-radius:5px">
      <div class="panel-body" style="font-size: 10px;padding:5px 20px; " >

        <div class="m-t-xs m-t-sm">
          <span >系统管理</span>
          <i class="fa fa-angle-right"></i>
          <span >角色管理</span>
          <i class="fa fa-angle-right"></i>
          <span >角色列表</span>
        </div>

      </div>
    </div>
  </div>
  <div class="wrapper-sm" style="font-size: 12px;">

    <div class="panel panel-default" style="border-radius:5px" >
      <div class="panel-body">
        <div [ngStyle]="{display: elc.a}">
          <button class="btn btn-info btn-sm pull-right bty" (click)="model.name='';buttonType=1;myModal.show()">新增</button>
        </div>

        <table class="table table-striped table-hover">
          <thead>
          <tr>
            <th style="width:50%">角色名称</th>
            <th style="width:50%;text-align: center;">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let item of data">
            <td>{{item.name}}</td>
            <td align="center">
              <a [ngStyle]="{display: elc.e}">
                <span tooltip="{{tool.editroleTooltip}}"  class="glyphicon glyphicon-pencil " style="color: green;margin-right: 10px"   (click)="setModel(item);buttonType=2;myModal.show()"></span>
              </a>

              <a [ngStyle]="{display: elc.d}">
                <span tooltip="{{tool.delroleTooltip}}" class="glyphicon glyphicon-remove " style="color: red;margin-right: 10px" (click)="model=item;buttonType=3;myModal.show()"> </span>
              </a>

              <a [ngStyle]="{display: elc.o}" [routerLink]="['auth',item.id]">
                <span tooltip="{{tool.editauthTooltip}}"  class="glyphicon glyphicon-plus " style="color: purple;margin-right: 10px"></span>
              </a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>


</div>
<div>
  <div bsModal #myModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title">
            <p *ngIf="buttonType==1">新增角色</p>
            <p *ngIf="buttonType==2">编辑角色</p>
            <p *ngIf="buttonType==3">删除角色</p>
          </h3>
        </div>
        <div class="modal-body">
          <div class="row" *ngIf="buttonType!=3">
            <div class="col-sm-10 ">
              <form class="bs-example form-horizontal">
                <div class="form-group">
                  <label class="col-lg-3 control-label">角色名称</label>
                  <div class="col-lg-7">
                    <input type="text" class="form-control" [(ngModel)]="model.name" name="name" placeholder="请输入角色名称" required="">
                  </div>
                  <div class="col-lg-2" style="color:red;margin-top: 8px;">
                    <p [hidden]="model.name">必填</p>
                  </div>
                   
                </div>
              </form>
            </div>
          </div>
        </div>


        <div *ngIf="buttonType==3">
          <alert type="danger">
            <h4>你确定要删除该角色吗？一旦点击<strong>确定</strong>按钮，则该角色将会被删除。</h4>
          </alert>
        </div>

        <div class="modal-footer">
          <button *ngIf="buttonType==1" class="btn btn-primary" (click)="confirmNew()" [disabled]="disabled||!model.name" >确定</button>
          <button *ngIf="buttonType==2" class="btn btn-primary" (click)="confirmEdit()" [disabled]="disabled||!model.name">确定</button>
          <button *ngIf="buttonType==3" class="btn btn-danger" (click)="confirmDelete()" [disabled]="disabled">确定</button>
          <button class="btn btn-default" (click)="myModal.hide()">取消</button>
        </div>
      </div>

    </div>
  </div>
</div>


